<template>
  <div class="activity">
    <div class="bgg">
      <div class="card_title">
        活动列表
      </div>
      <div class="groupbox" style="margin-bottom: 19px">
        <div class=" ">
          <a-space align="baseline">
            <span class="title">活动类型：</span>
            <a-radio-group v-model="status" class="h24" style="margin-bottom: 5px;" @change="statusChange">
              <a-radio-button :value="0">
                所有活动
              </a-radio-button>
              <a-radio-button :value="1">
                有效活动
              </a-radio-button>
              <a-radio-button :value="2">
                失效活动
              </a-radio-button>
            </a-radio-group>
          </a-space>
        </div>
        <div class=" ">
          <a-space align="baseline">
            <span class="title">活动小组：</span>
            <a-select
              label-in-value
              class="selecth24 br4"
              style="width: 175px;height:24px;"
              placeholder="请选择状态"
              @change="handleChange"
              v-model="group_id"
              allowClear
            >
              <a-select-option :value="v.id" v-for="v in classList" :key="v.id">
                {{ v.name }}
              </a-select-option>
            </a-select>
            <span class="title">组员：</span>
            <a-select
              label-in-value
              class="selecth24 br4"
              style="width: 175px;height:24px;"
              placeholder="请选择组员"
              @change="handleChange"
              v-model="user_id"
              allowClear
            >
              <a-select-option :value="v.id" v-for="v in classList" :key="v.id">
                {{ v.name }}
              </a-select-option>
            </a-select>
          </a-space>
        </div>
        <div class="" style="margin-top: 12px">
          <a-space align="baseline">
            <span class="title">联盟账号：</span>
            <a-select
              label-in-value
              class="selecth24 br4"
              style="width: 175px;height:24px;"
              placeholder="请选择状态"
              @change="handleChange"
              v-model="users"
              allowClear
            >
              <a-select-option :value="v.id" v-for="v in userList" :key="v.id">
                {{ v.cpName }}
              </a-select-option>
            </a-select>
            <span class="title">标题关键词：</span>
            <a-input v-model="search" placeholder="关键词" class="ipt br4"/>
            <a-button
              type="primary"
              :disabled="btnloading"
              size="small"
              class="br4"
              @click="getWebActivityList(1)">
              <a-icon v-if="btnloading" type="reload" :spin="btnloading"/>
              {{ btnloading===true?'搜索中...':'搜索' }}
            </a-button>
          </a-space>
        </div>
      </div>
      <div class="activitytable">
        <a-table
          :columns="columns"
          :rowKey="activity => activity.id"
          :dataSource="activity"
          :loading="loading"
          @change="handleTableChange"
          :pagination="pagination"
        >
          <div slot="index" slot-scope="text, row,index">
            <span
              class="index"
              :style="{
                backgroundColor:index<3? '#314659':'#f5f5f5',
                color:index<3? '#ffffff':'#101010',
              }">{{ index+1 }}</span>
          </div>
          <div slot="img" slot-scope="text, row">
            <img :src="row.img" alt="" class="br4" style="width: 80px;height: 80px;" @click="openimg(row.img)">
          </div>
          <div slot="active" slot-scope="row">
            <div>
              <a-button type="link" @click="goedit(row)">审核</a-button>
            </div>
          </div>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
  import { getWebActivityList } from '@/api/admin/investment'
  import moment from 'moment'
  import { getunionuser } from '@/api/activityApi'

  export default {
    name: 'Activity',
    data () {
      return {
        moment,
        classList: [],
        user_id: '',
        group_id: '',
        start: '',
        end: '',
        users: '',
        search: '',
        status: 0,
        pagination: {
          pageSize: 15,
          page: 1
        },
        userList: [],
        columns: [
          {
            title: '序号',
            align: 'center',
            dataIndex: 'index',
            scopedSlots: { customRender: 'index' }
          },
          {
            title: '活动标题',
            dataIndex: 'title',
            scopedSlots: {
              customRender: 'title'
            }
          },
          {
            title: '用户',
            dataIndex: 'user',
            scopedSlots: {
              customRender: 'user'
            }
          },
          {
            title: '活动id',
            dataIndex: 'eventId',
            scopedSlots: {
              customRender: 'eventId'
            }
          },
          {
            title: '开始时间',
            dataIndex: 'saveTime',
            scopedSlots: {
              customRender: 'saveTime'
            }
          },
          {
            title: '结束时间',
            dataIndex: 'endTime',
            scopedSlots: {
              customRender: 'endTime'
            }
          },
          {
            title: '总付款金额',
            dataIndex: 'alipayFee',
            scopedSlots: {
              customRender: 'alipayFee'
            }
          },
          {
            title: '团长账号',
            dataIndex: 'cpName',
            scopedSlots: {
              customRender: 'cpName'
            }
          },
          {
            title: '操作',
            scopedSlots: {
              customRender: 'active'
            }
          }
        ],
        activity: [
          // {
          //   id: 29299,
          //   title: '备战年货节年终大促，至尊商家专属通道【YY】*YY139',
          //   sceneId: 6,
          //   user: '史园园',
          //   group: '史园园',
          //   teamName: '',
          //   eventId: '387102577',
          //   saveTime: '2020-12-18',
          //   endTime: '2021-01-21',
          //   alipayFee: '0.00',
          //   cpName: '乐推联盟'
          // }
        ],
        loading: false,
        btnloading: false
      }
    },
    computed: {},
    created () {
      this.getWebActivityList(1)
      this.getunionuser()
    },
    mounted () {
    },
    methods: {
      // 团队
      getunionuser () {
        getunionuser()
          .then(res => {
            if (res.code === 200) {
              // console.log('团队返回', res)
              this.userList = res.data
            }
          })
          .catch(err => {
            console.log(err)
          })
      },
      statusChange (value) {
        console.log(value, this.status) //
      },
      openimg (url) {
        this.previewImage = url
        this.previewVisible = true
      },
      handleCancel () {
        this.previewVisible = false
      },
      goedit (row) {
        // this.$store.dispatch('setIssuename', row)
        // this.$router.push({
        //   path: '/gather/activity/gatherInfo'
        // })
      },
      handleChange (value) {
        console.log(value, this.search) //
        this.search = value.label
      },
      passChange (dates, dateStrings) {
        // console.log('From: ', dates[0], ', to: ', dates[1])
        console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
        this.start = dates[0].unix()
        this.end = dates[1].unix()
        console.log(this.start, this.end)
        // const str = moment(dateStrings[0]).format('YYYY-MM-DD') + ' 至 ' + moment(dateStrings[1]).format('YYYY-MM-DD')
      },
      getWebActivityList (page) {
        this.loading = true
        this.btnloading = true
        getWebActivityList({
          group_id: this.group_id,
          user_id: this.user_id,
          status: this.status, // 1有效活动2失效活动
          search: this.search,
          page: page,
          pagesize: 15
        }).then(res => {
          console.log('列表', res)
          this.activity = res.data.data
          const pagination = {
            ...this.pagination
          }
          pagination.total = res.data.total
          this.pagination = pagination
          this.loading = false
          this.btnloading = false
        }).catch(err => {
          console.log(err)
        })
      },
      handleTableChange (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch (params = {}) {
        // console.log('params:', params)
        this.loading = true
        this.getWebActivityList(params.page)
      }
    }
  }
</script>
<style lang="less" scoped>
  .activity {
    .card_title {
      color: rgba(16, 16, 16, 100);
      font-size: 20px;
      margin-bottom: 18px;
      font-weight: 600;
    }

    .index {
      background-color: #f5f5f5;
      border-radius: 20px;
      display: inline-block;
      font-size: 12px;
      font-weight: 600;
      /*margin-right: 24px;*/
      height: 20px;
      line-height: 20px;
      width: 20px;
      text-align: center;
    }

    .bgg {
      border-radius: 8px;
      margin-top: 10px;
      padding: 10px;
    }

    .h24 {
      /deep/ .ant-radio-button-wrapper {
        height: 24px;
        line-height: 22px;
      }
    }

    .groupbox {
      /deep/ .ant-input {
        border-radius: 4px;
      }
    }

    /deep/ .ant-table-body {
      border: 1px solid #BBBBBB;
      border-radius: 8px 8px 0 0;
    }

    /deep/ .ant-table-tbody {
      background-color: #ffffff;
    }

    /deep/ .ant-table-pagination.ant-pagination {
      float: none !important;
      margin: 16px auto !important;
      text-align: center !important;
    }

    .a_blue {
      color: #2396F9;
    }

    .title {
      color: #101010;
      font-size: 14px;
      font-weight: 600;
    }

    .ipt {
      width: 138px;
      height: 24px;
    }

    .timepacker {
      /deep/ .ant-calendar-picker-input {
        padding: 0;
        height: 24px;
      }
    }

    .selecth24 {
      /deep/ .ant-select-selection__rendered {
        line-height: 24px;
      }

      /deep/ .ant-select-selection {
        height: 24px;
        border-radius: 4px;
      }
    }

    .coupon {
      /*border: 1px solid rgb(255, 85, 64);*/
      text-align: center;
      font-size: 14px;
      border-radius: 4px;
      overflow: hidden;
      width: 96px;
      /*margin: 0 auto;*/

      .couponleft {
        width: 48px;
        height: 24px;
        line-height: 24px;
        background-color: rgb(255, 85, 64);
        color: #ffffff;
      }

      .couponright {
        width: 48px;
        height: 24px;
        line-height: 21px;
        background-color: #ffffff;
        color: rgb(255, 85, 64);
        border: 1px solid #ff5540;
        border-radius: 0 4px 4px 0;
      }
    }
  }
</style>
